<template>
	<view class="gt-admin">


		<view class="gt-admin-container">
			<view class="gt-admin-nav row">
				<view @click="$skip.goBack()" class="mr-15 pointer">
					<text class="iconfont icon-back c-secondary"></text>
					<text class="c-secondary">返回</text>
				</view>
				<view v-for="(item,index) in table.nav" :key="index">
					<text v-if="item.url" class="mr-5 pointer" @click="$skip.to(item.url)">{{item.label}}</text>
					<text v-else class="mr-5 c-secondary">{{item.label}}</text>
					<text class="mr-5 c-secondary " v-if="index +1 != nav.length "> / </text>
				</view>
			</view>
			<!-- <view class="row pl-30 pr-30 ">
			<input class="input-line input-block-sm mt-15 mr-15" v-model="searchInfo.name" type="text"
				placeholder="名称" />
			<view @click="getData()" class="btn btn-primary mt-15 ">
				<text class="iconfont icon-search btn-nav-icon mr-5"></text>
				搜索
			</view>
		</view> -->
			<view class="pl-30 pr-30 pt-10 t-xs c-secondary ">当前第 {{table.pageInfo.page}} 页，共
				{{table.pageInfo.totalPage}} 页
			</view>
			<view class="gt-admin-content">
				<view class="">
					<view class="row">
						<view class="col-auto" style="border: 1px solid #eeeeee;overflow: auto;border-radius: 5px;">
							<table class="gt-table" align="center">
								<thead>
									<tr>
										<td v-if="table.batchSelect" width="50">
											<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox">
											</checkbox>
										</td>
										<td v-for="(column,key) in table.columns" :key="key">{{column.label}}</td>
									</tr>
								</thead>
								<tbody v-if="!table.list || table.list.length == 0">
									<tr class="gt-table-tr">

										<td :colspan="table.columns.length">
											<view class="t-center c-secondary pd-15">
												无数据
											</view>
										</td>
									</tr>
								</tbody>
								<tbody v-for="(row,rowIndex) in table.list" :key="rowIndex">
									<tr class="gt-table-tr">
										<td v-if="table.batchSelect">
											<checkbox :checked="batchSelectList.indexOf(rowIndex)==-1 ? false : true "
												@click="selectCheckBox(rowIndex)"></checkbox>
										</td>
										<td v-for="(column,columnIndex) in table.columns" :key="columnIndex">
											<slot :name="column.field" :data="{row,column,rowIndex,columnIndex}">
												<!-- 时间 -->
												<view v-if="column.format == 'date'">
													{{ $tools.timeToDate(row[column.field],'Y-M-D ')  }}
												</view>
												<!-- 图片 -->
												<view v-else-if="column.format == 'img' && row[column.field] != ''"
													class="row pointer"
													@click="$fun.showImgs(row[column.field].split(','))">
													<image class="w-h-30 border-radius" :src="row[column.field]">
													</image>
												</view>
												<!-- 操作 -->
												<view v-else-if="column.field == 'process'">
													<gt-btn name="修改" iconClass="icon-icon-test btn-nav-icon mr-5"
														class="btn btn-xs mr-10" @update="update(row)"
														:popupUrl="'update'">
													</gt-btn>
													<gt-btn name="删除" iconClass="icon-delete btn-nav-icon mr-5"
														class="btn btn-xs btn-default"
														:postUrl="'/common/sys-common/brand-deletes?ids='+row.id"
														:confirmText="'您确认此操作？'" @callBack="deleteCallBack"></gt-btn>
												</view>
												<!-- 文字 -->
												<view v-else-if="column.format == 'select'">
													{{ $tools.getListVal(info[column.field],row[column.field]) }}
												</view>
												<!-- 文字 -->
												<view v-else>{{ row[column.field] }}</view>

											</slot>
										</td>
									</tr>
								</tbody>
							</table>
						</view>
					</view>
				</view>

			</view>

			<view class="row " style="padding:15px 30px 15px 40px;">
				<view>
					<view v-if="table.batchSelect" class="row">
						<view style="padding: 4px 15px 4px 0;">
							<checkbox :checked="selectAllCheckbox" @click="selectParentCheckBox"></checkbox>
						</view>
						<view v-for="(batchSelectRow,batchSelectIndex) in table.batchSelect" :key="batchSelectIndex">
							<gt-btn v-if="batchSelectList.length > 0" :class="batchSelectRow.class"
								:style="batchSelectRow.style" @callBack="deleteCallBack"
								:postUrl="batchSelectRow.url+'?ids=' + table.ids " :name="batchSelectRow.label">
							</gt-btn>
							<view v-else class="btn btn-sm btn-disabled-line  mr-15">{{batchSelectRow.label}}</view>
						</view>
					</view>
				</view>
				<view class="col-auto"></view>
				<view class="row ">
					<uni-pagination prevText="上一页" nextText="下一页" :total="table.pageInfo.totalCount"
						:pageSize="table.pageInfo.limit" :current="table.pageInfo.page" @change="pagination">
					</uni-pagination>
					<gt-select class="input-line input-sm page-limit ml-15" :list="pageLimitList" placeholder="10条"
						:value.sync="table.pageInfo.limit" @change="changePageLimit"></gt-select>
					<!-- <input class="input-line input-page ml-15 mr-15" type="number" v-model="searchPage" /> -->
					<!-- <button class="btn btn-sm " @click="skipPage()"
					:disabled="searchPage == '' || searchPage ==  table.pageInfo.page || searchPage > table.pageInfo.totalPage">跳转</button> -->
				</view>
			</view>


			<!-- 创建、修改弹窗 -->
			<!-- <uni-popup ref="popup" type="center">
			<view class="popup-box">
				<view class="row cut-border pl-15 pt-10 pb-10">
					<view class="col-auto">
						<view class="row">
							<view class="popup-title">线下打款</view>
						</view>
					</view>
					<view class="iconfont icon-close pointer popup-close-icon" @click="closePopup()"></view>
				</view>

				<scroll-view scroll-y="true" class="scroll-view-y">
					<view class="pd-30">

						<view class="row">
							<view class="input-title mr-15">
								<view class="fr"><span class="c-danger">*</span>打款金额</view>
							</view>
							<view class="col-auto">
								<input class="input-line " placeholder="必填" v-model="detail.pay_money" type="text" />
							</view>
						</view>
						<view class="row mt-30">
							<view class="input-title mr-15">
								<view class="fr"><span class="c-danger">*</span>图片</view>
							</view>
							<view class="col-auto">
								<gt-upload-file v-model="detail.user_memo" size="sm"></gt-upload-file>
							</view>
						</view>
						<view class="row mt-30">
							<view class="input-title mr-15"></view>
							<view class="col-auto">
								<view @click="createOrchange()" class="btn">立即提交</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</uni-popup> -->

		</view>
	</view>
</template>

<script>
	export default {
		name: "gt-page-table-list",
		props: {
			table: {
				type: [Array, Object],
				default: function() {
					return {};
				}
			}
		},
		created() {
			this.getData();
		},
		data() {
			return {
				searchPage: '',
				batchSelectList: [],
				pageLimitList: [{
						key: 20,
						val: '20条'
					},
					{
						key: 30,
						val: '30条'
					},
					{
						key: 50,
						val: '50条'
					},
					{
						key: 100,
						val: '100条'
					},
				],
			}
		},
		computed: {
			selectAllCheckbox() {
				if (this.table.list.length != 0 && this.batchSelectList.length == this.table.list.length) {
					return true;
				}
				return false;
			}
		},
		methods: {
			selectCheckBox(index) {
				console.log(index);
				let key = this.batchSelectList.indexOf(index);
				if (key == -1) {
					this.batchSelectList.push(index);
				} else {
					this.batchSelectList.splice(key, 1);
				}
			},
			selectParentCheckBox() {
				if (this.table.list.length != 0 && this.batchSelectList.length == this.table.list.length) {
					//取消
					this.batchSelectList = [];
				} else {
					//选中
					let list = [];
					for (let i in this.table.list) {
						list.push(parseInt(i));
					}
					this.batchSelectList = [];
					this.batchSelectList = list;
				}
			},
			getData() {
				if (this.table.listUrl) {
					let _this = this;
					let page = this.table.pageInfo.page || 0;
					this.$get({
						url: this.table.listUrl,
						data: {
							page: page + 1,
							limit: this.table.pageInfo.limit
						},
						afterFun(resp) {
							if (resp.list) {
								_this.table.list = resp.list;
							}
							if (resp.pageInfo) {
								_this.table.pageInfo = resp.pageInfo;
							}
						},
					});
				}
			},
			changePageLimit(e) {
				this.table.pageInfo.limit = e || 10;
				this.table.pageInfo.page = 0;
				this.getData();
			},
			// 分页获取列表
			pagination(e) {
				this.table.pageInfo.page = e.current
				this.getData();
			},

			// 分页跳转
			skipPage() {
				this.table.pageInfo.page = parseInt(this.searchPage)
				this.getData();
				this.searchPage = ''
			},
		}
	}
</script>

<style>
	.gt-table {
		width: 100%;
		max-width: 100%;
		background-color: #fff;
		font-size: 14px;
		color: #606266;
		overflow-x: scroll;
		overflow-y: hidden;
		white-space: nowrap;
		position: relative;
		overflow: hidden;
		box-sizing: border-box;
		border-collapse: collapse;
		border-spacing: 16px;
		color: #606266;
		text-align: left;
	}

	/* 线状网格 */
	.gt-table-line td {
		// border-top: none !important;
		// border-right: none !important;
		// border-left: none !important;
	}

	.gt-table thead {
		font-weight: 900;
		color: #858585;
	}

	.gt-table-tr:hover {
		background-color: #f9f9f9;
	}

	/* .gt-table-tr:active{
		background-color: red;
	} */
	.gt-table tr {
		display: table-row;
		vertical-align: inherit;
		border-color: inherit;
	}

	.gt-table td {
		padding: 15px;
	}

	.gt-table tbody td {
		border-top: 1px solid #eeeeee;
	}

	.showTrChild,
	.showTrChild td,
	.showTrChild .td-content {
		min-height: 50px;
		animation: showTr .3s;
	}

	@keyframes showTr {
		form: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}

		to: {
			min-height: 50px;
			background-color: aqua;
		}
	}

	.hideTrChild,
	.hideTrChild td,
	.hideTrChild .td-content {
		height: 0 !important;
		padding: 0 !important;
		overflow: hidden !important;
		border-top: none !important;
		animation: hideTr .3s;
	}

	@keyframes hideTr {
		form: {
			min-height: 100px;
		}

		to: {
			height: 0 !important;
			padding: 0 !important;
			overflow: hidden !important;
			border-top: none !important;
		}
	}

	button {
		border: none;
	}

	.page--active {
		background-color: black;
	}

	.page-limit {
		width: 80px;
		height: 28px;
	}
</style>
